<template>
  <div>
    <van-popup
      v-model="show"
      :close-on-click-overlay="false"
      position="bottom"
      :style="{ height: 'auto' }"
    >
      <div class="nav_bar">
        <div class="nav_icon" @click="closeClick">
          <img src="../../../assets/img/navbar/ic_back_left.png" alt="" />
        </div>
        <div class="nav_title">{{ title }}</div>
        <div class="nav_btn"></div>
      </div>
      <div class="content_box">
        <div class="current_title">你当前选择的储值方式：</div>
        <div class="current_img_box">
          <img src="../../../assets/img/stored/pay_type/paypal.png" alt="" />
          <div class="current_list_title">{{ title }}</div>
        </div>
        <div class="select_stored">
          <div class="select_stored_title">选择储值面额：</div>
          <div class="select_conversion">
            <span>{{ currentValue }}</span
            >{{ company }}=<span>{{ conversion }}</span
            >代币
          </div>
        </div>
        <ul class="current_item">
          <li
            v-for="(item, index) in value"
            :key="index"
            @click="itemClick(index)"
            :style="{
              border: currentIndex == index ? '.026667rem solid #ff5543' : '',
            }"
          >
            <span
              class="current_item_name"
              :style="{ color: currentIndex == index ? '#ff5543' : '' }"
              >{{ item }}</span
            >
            <span
              class="current_item_company"
              :style="{ color: currentIndex == index ? '#ff5543' : '' }"
              >{{ company }}</span
            >
          </li>
        </ul>
        <div
          class="current_input"
          @click="itemClick(8)"
          :style="{ border: currentIndex == 8 ? '.026667rem solid #ff5543' : '' }"
        >
          <input
            type="number"
            placeholder="自定义金额"
            v-model="inputValue"
            @input="print($event.target.value)"
          />
        </div>
        <div class="select_stored" style="margin-top: .26667rem">
          <div class="select_stored_title">付款金额：</div>
          <div class="select_conversion">
            <span>{{ currentValue }} {{ company }}</span>
          </div>
        </div>
        <!-- <div class="payment" @click="payBtnClick">确认支付</div> -->
        <div class="payment">确认支付</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// import {getPost} from '../../../network/post'
import {Toast} from 'vant'

export default {
  props: {
    show: {
      type: Boolean,
      default() {
        return {};
      },
    },
    title: {
      type: String,
      default() {
        return {};
      },
    },
    value: {
      type: Array,
      default() {
        return [];
      },
    },
    company: {
      type: String,
      default() {
        return {};
      },
    },
    rate: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      currentIndex: 4,
      currentValue: 100,
      inputValue: "",
    };
  },
  methods: {
    closeClick() {
      this.$emit("alipay-click", this.show);
    },
    itemClick(i) {
      this.inputValue = "";
      this.currentIndex = i;
      if (i == 8) {
        this.currentValue = 0;
      } else {
        this.currentValue = this.value[i];
      }
    },
    print(e) {
      if (e !== "") {
        this.currentValue = e;
      } else {
        this.currentValue = 0;
      }
    },
    // payBtnClick() {
    //   this.$emit("alipay-click", this.show);
    //   var url = "/user_pay_gold";
    //   var data = {
    //     paytype: 5,
    //     currency_code: this.company,
    //     amount: this.currentValue,
    //     child_paytype: 0
    //   };
    //   getPost(url, data).then(res => {
    //     if (res.status == "ok") {
    //       let url = res.data.pay_url
    //       this.$router.push({path: '/targetpage',query: {url: url}})
    //     } else if (res.info == "no_login") {
    //       window.location.href = loginurl;
    //     } else {
    //       Toast(res.info);
    //     }
    //   });
    // }
  },
  computed: {
    conversion() {
      if(this.rate) {
        return (this.currentValue * this.rate.USD_CNY).toFixed(2)
      }
    }
  }
};
</script>

<style scoped>
.van-popup {
  border-radius: .533333rem .533333rem 0 0;
}

.van-popup::-webkit-scrollbar {
  display:none
}

.nav_bar {
  width: 10rem;
  height: 1.173333rem;
  box-sizing: border-box;
  padding: 0 .426667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-bottom: .013333rem solid #cccccc;
}

.nav_icon {
  width: .8rem;
}

.nav_icon img {
  width: .56rem;
  height: .56rem;
}

.nav_title {
  flex: 1;
  text-align: center;
  font-size: .48rem;
  font-weight: 700;
  color: #222222;
}

.nav_btn {
  width: .8rem;
}

.content_box {
  box-sizing: border-box;
  width: 10rem;
  padding: 0 .426667rem;
}

.current_title {
  font-size: .426667rem;
  color: #222222;
  font-weight: bold;
  margin-top: .28rem;
  line-height: .6rem;
}

.current_img_box {
  width: 9.146667rem;
  height: 1.333333rem;
  border: .026667rem solid #FF5543;
  border-radius: .2rem;
  font-size: .4rem;
  color: #222222;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-top: .28rem;
}

.current_img_box img {
  width: .8rem;
  height: .8rem;
  margin: 0 .266667rem;
}

.select_stored {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .8rem;
}

.select_stored_title {
  line-height: .6rem;
  font-size: .426667rem;
  font-weight: 700;
  color: #222222;
}

.select_conversion {
  font-size: .426667rem;
  color: #222222;
}

.select_conversion span {
  color: #ff5543;
}

.current_item {
  margin-top: .266667rem;
  width: 100%;
  height: 2.933333rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}

.current_item li {
  box-sizing: border-box;
  padding: .133333rem 0;
  width: 2.106667rem;
  height: 1.333333rem;
  border: .026667rem solid #c1c1c1;
  border-radius: .213333rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.current_item_name {
  font-size: .506667rem;
  font-weight: 800;
  color: #777777;
}

.current_item_company {
  font-size: .373333rem;
  font-weight: 800;
  color: #c1c1c1;
}

.current_input {
  position: relative;
  margin-top: .266667rem;
  box-sizing: border-box;
  width: 9.146667rem;
  height: 1.333333rem;
  border: .026667rem solid #c1c1c1;
  border-radius: .213333rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.current_input input {
  width: 8.8rem;
  height: 1.133333rem;
  border-radius: .213333rem;
  outline: none;
  border: 0;
  text-align: center;
  font-size: .426667rem;
  font-weight: bold;
}

.payment {
  margin: .4rem 0;
  width: 9.146667rem;
  height: 1.333333rem;
  background: #ff5543;
  border-radius: .186667rem;
  font-size: .426667rem;
  font-weight: 400;
  text-align: center;
  line-height: 1.266667rem;
  color: #ffffff;
}
</style>